<template>
  <div class="friendsaside-container">
    <header class="header">
      <h1>活跃用户</h1>
    </header>
    <main class="main">
      <article class="main-item" v-for="(item, index) in HotUserInfo" :key="index">
        <section class="section-left">
          <el-avatar shape="square" :size="60" :src="item.avatar"></el-avatar>
        </section>
        <section class="section-main">
          <article class="art-item">用户名：{{ item.username }}</article>
          <article class="art-item">身份：{{ item.role }}</article>
          <article class="art-item">发表文章数：{{ item.articleNum }}</article>
        </section>
        <section class="section-right">
          <el-tooltip class="item" effect="dark" content="添加好友" placement="top">
            <el-button type="primary" icon="el-icon-circle-plus-outline" class="btn-icon" @click="handleRequest(item)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="关注作者" placement="top">
            <el-button type="primary" icon="el-icon-star-off" class="btn-icon" @click="handleAttention(item)"></el-button>
          </el-tooltip>
        </section>
      </article>
    </main>
    <footer class="footer"></footer>
  </div>
</template>

<script>
export default {
  name: 'FriendsAside',
  data () {
    return {
      HotUserInfo: []
    }
  },
  methods: {
    async initHotUserInfo () {
      const { data: res } = await this.$api.queryHotUser()
      // console.log(res)
      this.HotUserInfo = res.data
    },
    // 发送添加好友请求，等用户同意后可可通过
    async handleRequest (friends) {
      var myId = localStorage.getItem('_id')
      var formData = {
        code: 0,
        friendsForm: {
          friendsId: friends._id,
          friendsName: friends.username,
          friendsAvatar: friends.avatar,
          request_time: new Date()
        },
        myForm: {
          myId,
          myName: localStorage.getItem('username'),
          myAvatar: localStorage.getItem('avatar'),
          request_time: new Date()
        }
      }
      formData = JSON.stringify(formData)
      if (myId) {
        const { data: res } = await this.$api.addOrAttention({ formData })
        console.log(res)
        if (res.err_code === 0) {
          this.$notify({
            title: '成功',
            message: res.message,
            type: 'success'
          })
        } else if (res.err_code === 1) {
          this.$notify({
            title: '警告',
            message: res.message,
            type: 'warning'
          })
        } else if (res.err_code === 2) {
          this.$notify.info({
            title: '提示',
            message: res.message
          })
        }
      } else {
        this.$notify({
          title: '警告',
          message: '请先登录',
          type: 'warning'
        })
      }
    },
    // 关注，不需要用户同意，直接关注
    async handleAttention (friends) {
      var myId = localStorage.getItem('_id')
      if (myId) {
        var formData = {
          code: 1,
          friendsForm: {
            friendsId: friends._id,
            friendsName: friends.username,
            friendsAvatar: friends.avatar,
            request_time: new Date()
          },
          myForm: {
            myId,
            myName: localStorage.getItem('username'),
            myAvatar: localStorage.getItem('avatar'),
            request_time: new Date()
          }
        }
        formData = JSON.stringify(formData)
        const { data: res } = await this.$api.addOrAttention({ formData })
        console.log(res)
        if (res.err_code === 0) {
          this.$notify({
            title: '成功',
            message: res.message,
            type: 'success'
          })
        } else if (res.err_code === 1) {
          this.$notify({
            title: '警告',
            message: res.message,
            type: 'warning'
          })
        }
      } else {
        this.$notify({
          title: '警告',
          message: '请先登录',
          type: 'warning'
        })
      }
      // console.log(avatarId)
    }
  },
  created () {
    this.initHotUserInfo()
  }
}
</script>

<style lang="less" scoped>
.friendsaside-container {
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: space-between;
  // flex-direction: column;
  // align-content: flex-start;
  // align-items: center;
  // height: 100%;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  // padding: 1rem 1.2rem;
  overflow: hidden;
}
.header {
  font-size: 18px;
  margin-bottom: 10px;
}
.main-item {
  display: flex;
  // justify-content: center;
  margin-bottom: 10px;
}
.main-item .section-left {
  flex: 1;
  text-align: center;
}
.main-item .section-main {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  flex: 2;
  padding-left: 10px;
}
.main-item .section-right {
  display: flex;
  // flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.section-main .art-item {
  font-size: 14px;
}
.btn-icon {
  width: 25px;
  height: 25px;
  padding: 0;
}
</style>
